import { App } from 'vue'
import defaultImg from '@/assets/images/200.png'
export default (app: App) => {
  app.directive('lazyload', {
    mounted(el: HTMLImageElement, binding) {
      const observe = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            observe.unobserve(el)
            el.onerror = () => {
              el.src = defaultImg
            }
            el.src = binding.value
          }
        },
        {
          threshold: 0.1
        }
      )
      observe.observe(el)
    }
  })
}
